<template>
    <div class="loginCon">
        <el-dialog v-model="userStore.dialogTableVisible" title="用户登录" width="800">
            <el-row :gutter="0">
                <el-col :span="12">
                    <!-- 左侧登录获取二维码 -->
                    <div class="leftBox" v-if="sceen">
                        <div class="top">
                            <el-form ref="loginForm" :model="loginData" :rules="rules">
                                <el-form-item prop="phone">
                                    <el-input placeholder="请输入手机号码" v-model="loginData.phone"
                                        prefix-icon="User"></el-input>
                                </el-form-item>
                                <el-form-item prop="code">
                                    <el-input placeholder="请输入手机验证码" v-model="loginData.code" :disabled="true"
                                        prefix-icon="Lock"></el-input>
                                </el-form-item>
                                <el-form-item>
                                    <el-button type="default" :disabled="loginData.phone.length != 11 || flag == false">
                                        <span v-if="flag" @click="getNeed">获取验证码</span>
                                        <countDown v-else :flag="flag" @backEmit="backEmit"></countDown>
                                    </el-button>
                                </el-form-item>
                            </el-form>
                        </div>
                        <div class="bottom">
                            <el-button type="primary" :disabled="loginData.phone.length < 11 || !loginData.code"
                                @click="login">用户登录</el-button>
                            <p @click="change">微信扫码登录</p>
                            <svg t="1709390868106" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="1767" width="32" height="32">
                                <path
                                    d="M747.685 397.746a278.056 278.056 0 0 0-55.663-10.097c0.176-1.383 0.254-2.817-0.055-4.25C666.6 265.125 539.421 175.961 396.108 175.961c-161.945 0-293.707 112.922-293.707 251.727 0 74.469 38.016 141.566 110.055 194.48l-25.114 75.496a12.855 12.855 0 0 0 3.762 13.723 12.894 12.894 0 0 0 8.399 3.121c1.945 0 3.918-0.461 5.734-1.355l94.285-47.184 11.621 2.355c29.031 5.965 54.094 11.137 84.965 11.137 9.09 0 18.305-0.41 27.344-1.176 3.66-0.308 6.758-2.152 8.855-4.812 33.996 85.066 127.696 146.48 237.953 146.48 28.239 0 56.832-6.808 82.485-13.234l72.676 39.73a12.842 12.842 0 0 0 6.144 1.59c2.867 0 5.734-0.972 8.039-2.843 4.043-3.278 5.707-8.676 4.199-13.618l-18.562-61.722C887.475 720.68 921.6 661.848 921.6 603.278c0-79.944-53.36-151.378-130.419-188.83"
                                    fill="#E7402E" p-id="1768"></path>
                                <path
                                    d="M831.565 861.039a25.893 25.893 0 0 1-12.383-3.185l-68.22-37.294c-26.957 6.668-53.498 12.393-80.702 12.393-107.302 0-203.612-56.467-244.416-141.856-0.431 0.058-0.865 0.105-1.302 0.142a338.189 338.189 0 0 1-28.434 1.222c-32.084 0-57.661-5.255-87.277-11.34l-7.499-1.52-90.277 45.178c-3.653 1.799-7.621 2.729-11.552 2.729a25.91 25.91 0 0 1-16.87-6.259c-7.923-6.895-10.898-17.722-7.643-27.638l22.182-66.683C126.619 572.375 89.401 503.66 89.401 427.688c0-145.971 137.588-264.727 306.707-264.727 71.959 0 142.854 21.92 199.622 61.722 55.72 39.067 93.846 92.538 107.82 151.018a291.472 291.472 0 0 1 47.747 9.558c6.897 1.995 10.871 9.204 8.876 16.1-1.995 6.897-9.206 10.868-16.101 8.876a265.576 265.576 0 0 0-53.061-9.625 13 13 0 0 1-11.886-14.6c0.017-0.136 0.028-0.241 0.036-0.32-24.34-112.191-145.926-196.729-283.054-196.729-154.782 0-280.707 107.092-280.707 238.727 0 70.04 36.222 133.667 104.751 184.002a13.001 13.001 0 0 1 4.64 14.581l-24.976 75.08 93.889-47.007a13.01 13.01 0 0 1 8.4-1.116l11.96 2.425c28.226 5.8 52.603 10.808 82.044 10.808 8.504 0 17.268-0.375 26.049-1.113a13.026 13.026 0 0 1 12.003-4.732 13.001 13.001 0 0 1 10.218 8.033c33.06 82.724 123.835 138.304 225.881 138.304 25.904 0 52.304-6.076 79.326-12.844a13 13 0 0 1 9.395 1.204l72.213 39.477-18.402-61.19a13 13 0 0 1 4.39-13.944c58.952-46.583 91.418-102.119 91.418-156.378 0-72.358-47.17-140.233-123.102-177.138-6.458-3.139-9.148-10.917-6.009-17.375s10.919-9.146 17.375-6.01c40.504 19.686 74.753 48.274 99.043 82.675 25.313 35.848 38.693 76.599 38.693 117.848 0 60.145-33.449 120.667-94.396 171.192l16.048 53.365c3.055 10.013-0.26 20.811-8.461 27.459a25.82 25.82 0 0 1-16.225 5.745z"
                                    fill="#3D100B" p-id="1769"></path>
                                <path
                                    d="M501.456 378.43c21.066 0 35.148-14.106 35.148-35.121 0-21.25-14.055-34.996-35.148-34.996-21.098 0-42.266 13.746-42.266 34.996 0.023 21.015 21.195 35.121 42.266 35.121zM304.87 308.313c-21.067 0-42.367 13.746-42.367 34.996 0 21.015 21.3 35.121 42.367 35.121 20.992 0 35.047-14.106 35.047-35.121-0.024-21.25-14.055-34.996-35.047-34.996z"
                                    fill="#F4DD50" p-id="1770"></path>
                                <path
                                    d="M432.433 683.542c-5.712 0-10.949-3.794-12.531-9.57-4.82-17.602-8.701-53.066-8.701-70.694 0-54.531 23.464-107.561 66.069-149.321 41.292-40.472 97.652-67.752 158.701-76.814 7.102-1.049 13.714 3.849 14.768 10.951 1.054 7.102-3.848 13.714-10.95 14.768-115.494 17.144-202.587 103.304-202.587 200.417 0 15.614 3.662 48.796 7.778 63.827 1.896 6.925-2.18 14.076-9.105 15.972-1.15 0.313-2.306 0.464-3.442 0.464z"
                                    fill="#3D100B" p-id="1771"></path>
                                <path
                                    d="M259.169 604.143a14.936 14.936 0 0 1-9.213-3.171 264.716 264.716 0 0 1-15.77-13.329c-6.115-5.59-6.54-15.078-0.951-21.192 5.589-6.114 15.077-6.541 21.192-0.951a234.594 234.594 0 0 0 13.976 11.813c6.533 5.094 7.699 14.52 2.605 21.053a14.976 14.976 0 0 1-11.839 5.777zM210.952 554.664a14.977 14.977 0 0 1-12.021-6.014c-27.138-36.265-46.109-79.47-54.863-124.945-1.566-8.135 3.759-15.999 11.894-17.565 8.137-1.57 15.999 3.759 17.565 11.894 7.9 41.041 24.991 79.991 49.424 112.641 4.963 6.633 3.61 16.034-3.022 20.997a14.936 14.936 0 0 1-8.977 2.992z"
                                    fill="#FFFFFF" p-id="1772"></path>
                                <path
                                    d="M592.796 511.961c-14.055 0-28.11 14.156-28.11 28.188 0 14.129 14.055 28.082 28.11 28.082 21.117 0 35.07-13.953 35.07-28.082 0-14.055-13.953-28.188-35.07-28.188zM747.213 511.961c-13.847 0-27.902 14.156-27.902 28.188 0 14.129 14.055 28.082 27.902 28.082 21.043 0 35.25-13.953 35.25-28.082 0-14.055-14.179-28.188-35.25-28.188z"
                                    fill="#F4DD50" p-id="1773"></path>
                            </svg>
                        </div>
                    </div>

                    <div class="leftwx" v-else>
                        <!-- 微信二维码  -->
                        <div id="login_container">
                        </div>
                        <div class="phone" @click="handler">
                            <p>手机短信验证码登录</p>
                            <svg t="1685676069573" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="2476" width="16" height="16">
                                <path
                                    d="M820.409449 797.228346q0 25.19685-10.07874 46.866142t-27.716535 38.299213-41.322835 26.204724-50.897638 9.574803l-357.795276 0q-27.212598 0-50.897638-9.574803t-41.322835-26.204724-27.716535-38.299213-10.07874-46.866142l0-675.275591q0-25.19685 10.07874-47.370079t27.716535-38.80315 41.322835-26.204724 50.897638-9.574803l357.795276 0q27.212598 0 50.897638 9.574803t41.322835 26.204724 27.716535 38.80315 10.07874 47.370079l0 675.275591zM738.771654 170.330709l-455.559055 0 0 577.511811 455.559055 0 0-577.511811zM510.992126 776.062992q-21.165354 0-36.787402 15.11811t-15.622047 37.291339q0 21.165354 15.622047 36.787402t36.787402 15.622047q22.173228 0 37.291339-15.622047t15.11811-36.787402q0-22.173228-15.11811-37.291339t-37.291339-15.11811zM591.622047 84.661417q0-8.062992-5.03937-12.598425t-11.086614-4.535433l-128 0q-5.03937 0-10.582677 4.535433t-5.543307 12.598425 5.03937 12.598425 11.086614 4.535433l128 0q6.047244 0 11.086614-4.535433t5.03937-12.598425z"
                                    p-id="2477"></path>
                            </svg>
                        </div>
                    </div>
                </el-col>
                <el-col :span="12">
                    <!-- 右侧二维码 -->
                    <div class="rightBox">
                        <div class="dim">
                            <img src="../../assests/images/code_login_wechat.png" alt="">
                            <svg t="1709462078916" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="4379" width="32" height="32">
                                <path
                                    d="M664.250054 368.541681c10.015098 0 19.892049 0.732687 29.67281 1.795902-26.647917-122.810047-159.358451-214.077703-310.826188-214.077703-169.353083 0-308.085774 114.232694-308.085774 259.274068 0 83.708494 46.165436 152.460344 123.281791 205.78483l-30.80868 91.730191 107.688651-53.455469c38.558178 7.53665 69.459978 15.308661 107.924012 15.308661 9.66308 0 19.230993-0.470721 28.752858-1.225921-6.025227-20.36584-9.521864-41.723264-9.521864-63.862493C402.328693 476.632491 517.908058 368.541681 664.250054 368.541681zM498.62897 285.87389c23.200398 0 38.557154 15.120372 38.557154 38.061874 0 22.846334-15.356756 38.156018-38.557154 38.156018-23.107277 0-46.260603-15.309684-46.260603-38.156018C452.368366 300.994262 475.522716 285.87389 498.62897 285.87389zM283.016307 362.090758c-23.107277 0-46.402843-15.309684-46.402843-38.156018 0-22.941502 23.295566-38.061874 46.402843-38.061874 23.081695 0 38.46301 15.120372 38.46301 38.061874C321.479317 346.782098 306.098002 362.090758 283.016307 362.090758zM945.448458 606.151333c0-121.888048-123.258255-221.236753-261.683954-221.236753-146.57838 0-262.015505 99.348706-262.015505 221.236753 0 122.06508 115.437126 221.200938 262.015505 221.200938 30.66644 0 61.617359-7.609305 92.423993-15.262612l84.513836 45.786813-23.178909-76.17082C899.379213 735.776599 945.448458 674.90216 945.448458 606.151333zM598.803483 567.994292c-15.332197 0-30.807656-15.096836-30.807656-30.501688 0-15.190981 15.47546-30.477129 30.807656-30.477129 23.295566 0 38.558178 15.286148 38.558178 30.477129C637.361661 552.897456 622.099049 567.994292 598.803483 567.994292zM768.25071 567.994292c-15.213493 0-30.594809-15.096836-30.594809-30.501688 0-15.190981 15.381315-30.477129 30.594809-30.477129 23.107277 0 38.558178 15.286148 38.558178 30.477129C806.808888 552.897456 791.357987 567.994292 768.25071 567.994292z"
                                    fill="#5D5D5D" p-id="4380"></path>
                            </svg>
                            <p>微信扫一扫关注</p>
                            <p>快速预约挂号</p>
                        </div>

                        <div class="dim">
                            <img src="../../assests/images/code_app.png" alt="">
                            <svg t="1709462234904" class="icon" viewBox="0 0 1024 1024" version="1.1"
                                xmlns="http://www.w3.org/2000/svg" p-id="6323" width="32" height="32">
                                <path
                                    d="M823.00322 24.512277l-591.737042 0c-11.307533 0-20.466124 9.15859-20.466124 20.466124l0 934.043199c0 11.2973 9.15859 20.466124 20.466124 20.466124l591.737042 0c11.307533 0 20.466124-9.168824 20.466124-20.466124L843.469344 44.978401C843.469344 33.670867 834.310753 24.512277 823.00322 24.512277zM802.537096 773.96127l-480.135268 0c-11.307533 0-20.466124 9.168824-20.466124 20.466124 0 11.307533 9.15859 20.466124 20.466124 20.466124l480.135268 0 0 143.661957-550.804794 0L251.732301 65.444525l550.804794 0L802.537096 773.96127z"
                                    p-id="6324"></path>
                                <path
                                    d="M527.134699 886.514719m-48.461735 0a47.358 47.358 0 1 0 96.92347 0 47.358 47.358 0 1 0-96.92347 0Z"
                                    p-id="6325"></path>
                            </svg>
                            <p>扫一扫下载</p>
                            <p>"预约挂号"APP</p>
                        </div>
                    </div>
                    <div class="rightText">
                        <p>xxxxxx官方平台指定</p>
                        <p>快速挂号 安全放心</p>
                    </div>
                </el-col>
            </el-row>
            <template #footer>
                <div class="dialog-footer">
                    <el-button @click="userStore.closeDia">
                        关闭窗口
                    </el-button>
                </div>
            </template>
        </el-dialog>
    </div>
</template>

<script setup lang="ts">
import { useUserStore } from '@/stores/modules/user/user'
import countDown from '@/components/login/countDown/index.vue'
import { ElMessage } from 'element-plus';
import { reactive, ref,watch } from 'vue'
import { getInfoWx } from '@/api/email/index'
import type { wxType } from '@/api/email/type'
import { useRouter} from "vue-router"
let $router = useRouter()

const validatorPhone = (rule: any, value: any, callback: any) => {
    let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;
    if (reg_tel.test(value)) {
        callback()
    } else {
        callback(new Error("号码尾数不能少于11位"))
    }
}

// 表单
let loginForm = ref()
// 表单验证规则
let rules = reactive({
    phone: [
        { trigger: 'change', validator: validatorPhone }
    ]
})


let userStore = useUserStore()
// 切换
let sceen = ref(true)

// 是否显示定时器
let flag = ref<boolean>(true)
// 电话正则
let reg_tel = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/;

let loginData = reactive({
    // 电话号码
    // 存储验证码
    phone: '',
    code: ''
})

// 监听sceen数据
watch(
  () => sceen.value,
  (val:boolean) => {
    if (val === false) {
        userStore.queryData()
      
    }
  }
);

// 
const backEmit = (v: any) => {
    flag.value = v

}
// 获取
const getNeed = async () => {
    if (loginData.phone.length != 11) return false;

    let result = reg_tel.test(loginData.phone)
    // == true 正则验证通过 
    if (result == true) {
        // 正则后更改flag 且发请求
        flag.value = false

        let re = await userStore.onceCode(loginData.phone);
        loginData.code = userStore.phoneCode
    } else {
        ElMessage({
            type: "error",
            message: "手机电话格式有误"
        })
    }

}
// 用户登录
const login = async () => {
    let result: any = await userStore.userLogin(loginData);
    if (result == 'ok') {
        userStore.closeDia()
        $router.push(userStore.redirect)
        
    }

}

//
const handler = () => {
    sceen.value = true
}

const change = async () => {
    sceen.value = false
    // 加密本地路径 + 重定向页面
    let wx_uri = encodeURIComponent(window.location.origin + '/wxlogin');
    let result: wxType = await getInfoWx(wx_uri);
    
    //@ts-ignore
    new WxLogin({
        self_redirect: true, //true:手机点击确认登录后可以在 iframe 内跳转到 redirect_uri
        id: "login_container", //显示二维码容器设置
        appid: result.data.appid, //应用位置标识appid
        scope: "snsapi_login", //当前微信扫码登录页面已经授权了
        redirect_uri: result.data.redirectUri, //填写授权回调域路径,就是用户授权成功以后，微信服务器向公司后台推送code地址
        state: result.data.state, //state就是学校服务器重定向的地址携带用户信息
        style: "black",
        href: "",
    });
}

</script>

<style lang="scss" scoped>
:deep(.el-dialog__body) {
    border-bottom: 1px solid #ccc;
}

:deep(.el-form-item__error) {
    left: 55px
}

.loginCon {
    :deep(.el-dialog__header) {
        border-top: 1px solid #ccc;
        border-bottom: 1px solid #ccc;
        margin-right: 0px;
    }

    :deep(.el-dialog__body) {
        border-bottom: 1px solid #ccc;
    }

    .leftBox {
        width: 100%;
        height: 300px;
        border: 1px solid #ccc;
        padding-top: 0px;

        .top {
            width: 100%;
            height: 60%;
            display: flex;
            flex-direction: column;
            justify-content: end;

            :deep(.el-input) {
                width: 70%;
                margin: 0 auto;

            }

            :deep(.el-button) {
                margin: 0 auto;

            }
        }

        .bottom {
            width: 100%;
            height: 40%;
            display: flex;
            flex-direction: column;
            justify-content: space-evenly;
            align-items: center;

            p:hover {
                cursor: pointer;
            }

            :deep(.el-button) {
                width: 80%;
            }

        }
    }

    .leftwx {
        width: 100%;
        border: 1px solid #ccc;
        padding-top: 0px;
        display: flex;
        justify-content: center;
        flex-direction: column;

        #login_container {
            margin: 0 auto;
        }

        .phone {
            display: flex;
            align-items: center;
            justify-content: center;
            flex-direction: column;

            svg {
                margin-top: 10px;
            }

            p:hover {
                cursor: pointer;
            }
        }
    }

    .rightBox {
        width: 100%;
        height: 300px;
        display: flex;

        .dim {
            width: 50%;
            height: 250px;
            display: flex;
            flex-direction: column;
            align-items: center;

            img {
                width: 150px;
                height: 150px;
            }

            p {
                margin-top: 10px;
            }
        }
    }

    .rightText {
        width: 100%;
        height: 100px;

        p {
            text-align: center;
            font-size: 30px;
            font-weight: 10px;
            transform: skewX(-20deg);
            margin-top: 5px;
        }
    }

}
</style>